<template>
  <div class="grid-board">
    <a-row
      type="flex"
      :gutter="space * 2"
      :style="{
        marginTop: -1 * space + 'px',
        marginBottom: -1 * space + 'px',
      }"
    >
      <a-col
        v-for="(item, index) of layouts"
        :key="item.key || index"
        v-bind="item.colSpan"
        :style="{ paddingTop: space + 'px', paddingBottom: space + 'px' }"
      >
        <div class="grid-board-wrap" :class="itemClass" :style="item.style">
          <slot v-if="typeof item.slot === 'string' && item.slot" :name="item.slot" :scope="item" />
          <slot v-else :scope="item" />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import GridBoard from '../layouts/grid-board.vue';

export default {
  name: 'grid-board',
  extends: GridBoard,
  props: {
    itemClass: { type: String, default: '' },
    itemStyle: { type: Object, default: () => ({}) },
  },
  computed: {
    layouts() {
      if (!this.columns || !this.columns.length) return [];
      return this.columns.map((item) => {
        let { colSpan, style } = item || {};
        colSpan = this.getColSpan(item);
        style = Object.assign({}, this.itemStyle, style);
        return Object.assign({}, item, { colSpan, style });
      });
    },
  },
};
</script>

<style lang="less">
.grid-board {
  .grid-board-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 12px;
    overflow: hidden auto;
    background: transparent;
  }
}
</style>
